@media (max-width: 992px) {
    .vid-parent {
        width: 90%;
        height: 50%;
    }

    /** start nav **/
    .left {
        position: fixed;
        background-color: var(--second-bg);
        flex-direction: column;
        padding: 2rem 2rem;
        border-radius: 2rem;
        top: -20rem;
        opacity: 0;
        left: 50%;
        z-index: -1;
        transform: translateX(-50%);
        transition: 0.6s all ease;
        box-shadow: var(--shadow);
    }

    .activeNavMenu .left {
        z-index: 9999999999;
        opacity: 1;
        top: 50%;
        transform: translate(-50%, -80%);
    }

    .left .search {
        width: 100%;
        margin-left: 0;
    }

    .register {
        flex-direction: column;
        text-align: center;
    }

    .signup {
        margin: 3rem 0 2rem;
    }

    .toggleBarBtn {
        display: block;
        position: relative;
        width: 30px;
        background: none;
        border: none;
        height: 30px;
    }

    .toggleBarBtn span {
        width: 30px;
        height: 4px;
        background-color: var(--font-dark);
        border-radius: 10rem;
        margin: 0.25rem 0;
        left: 0;
        transition: 0.3s all ease;
        position: absolute;
    }

    .toggleBarBtn .topLine {
        top: 0;
    }

    .toggleBarBtn .middleLine {
        top: 8px;
    }

    .toggleBarBtn .bottomLine {
        top: 16px;
    }

    .activeNavMenu .topLine {
        width: 30px;
        transform: rotate(-45deg);

        transform-origin: right;
    }

    .activeNavMenu .middleLine {
        opacity: 0;
    }

    .activeNavMenu .bottomLine {
        width: 30px;
        transform: rotate(45deg);
        transform-origin: right;
        top: 21.5px;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 58%;
    }

    /************ body ************/
    .rightCard {
        order: 2;
    }

    .preview-card {
        margin-top: 0rem;
        width: 90%;
        /* box-shadow: none; */
        margin-left: auto;
        margin-bottom: 3rem;
        margin-right: auto;
    }

    .preview-card .card-content {
        padding: 2rem 3rem;
    }

    .lectureName {
        width: 100%;
        text-align: center;
        font-size: 2.8rem;
    }

    .lectureDescription {
        width: 100%;
        text-align: center;
    }

    .lectureRelease {
        justify-content: center;
    }

    .lectureUbdateDate {
        justify-content: center;
    }

    .lec-hero-image {
        width: 60%;
        margin: 0 auto 3rem;
        display: block;
    }

    .preview-card-image {
        display: none;
    }

    .header {
        padding: 15rem 0 12rem;
    }

    .month {
        padding: 2rem 0;
    }

    .lec-image-content, .lec-hero-image img {
        border-radius: 10px;
    }

}

@media (max-width: 480px) {
    html {
        font-size: 55%;
    }

    .lec-hero-image {
        width: 80%;
    }
}

@media (max-width: 400px) {
    .preview-card {
        width: 100%;
    }
}